<template>
  <el-container>
    <div class="header">
      <div class="title">苏小课直播教学平台</div>
      <div class="user-info">
        <div class="notification">
          <i class="bell-icon">🔔</i>
          <span class="badge">1</span>
        </div>
        <div class="user">您好，{{ userStore.uname }}！</div>
        <div class="actions">
          <a href="#">修改密码</a> |
          <a href="./login.html">退出</a>
        </div>
      </div>
    </div>
    <el-header>
      <div class="breadcrumb-nav">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item @click='navigateTo("teacherHome/home.html")'>首页</el-breadcrumb-item>
          <el-breadcrumb-item @click='navigateTo("teacherClass/teacherClass.html")'>我的班级</el-breadcrumb-item>
          <el-breadcrumb-item @click='navigateTo("classDetail/classDetail.html")'>2019级会计1班</el-breadcrumb-item>
          <el-breadcrumb-item>{{ student.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-header>

    <el-main>
      <div class="content-wrapper">
        <div class="student-info">
          <el-avatar :src="student.avatar" size="large" />
          <div class="student-details">
            <h2>{{ student.name }}</h2>
            <p>专业: {{ student.major }}</p>
            <p>{{ student.usageDetails }}</p>
          </div>
        </div>

        <div class="study-details">
          <h3>学习详情</h3>
          <p>
            在此期间内 ， 共学习 1280 分钟 ， 练习 3 次 ， 考试 1 次 ； 应预习
            10 次 ， 正常预习 8 次 ， 应复习 12 次 ， 正常复习 12 次 ， 应交作业
            110 份 ， 正常提交作业 58 份 ， 占比 52 ％ ， 延交作业 3 份 ，
            未交作业 52 份 ， 占比 2.7 ％ ，共做题 50 道 ， 错题 18 道 ， 得分率
            71 ％。
          </p>
        </div>

        <div class="chart-section">
          <h3>学科成绩</h3>
          <div id="echarts-bar" style="width: 100%; height: 400px"></div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { useUserStore } from "../../store/user.js";
let userStore = useUserStore();
userStore.storeInit();

import "../../../public/header.css";

import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import {
  ElAvatar,
  ElContainer,
  ElHeader,
  ElMain,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElImage,
} from "element-plus";

const student = ref({
  avatar: "path/to/avatar.jpg", // 替换为实际头像路径
  name: "陈小平",
  major: "会计",
  usageDetails: "本年度使用累计0分钟，已连续登录2天。",
});

const createBarChart = () => {
  const chartDom = document.getElementById("echarts-bar");
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: "学科成绩分析表",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["班级平均分", "个人分数"],
    },
    xAxis: {
      type: "category",
      data: ["基础会计", "法规", "财务管理"],
    },
    yAxis: {
      type: "value",
      name: "得分",
    },
    series: [
      {
        name: "班级平均分",
        type: "bar",
        data: [85, 88, 90],
      },
      {
        name: "个人分数",
        type: "bar",
        data: [90, 92, 89],
      },
    ],
  };
  myChart.setOption(option);
};

onMounted(() => {
  createBarChart();
});

function navigateTo(page) {
  window.location.href = `/src/pages/${page}`;
}
</script>

<style scoped>
#app {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  padding: 20px;
}

.el-header {
  background-color: #fff;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.top-nav {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.breadcrumb-nav {
  padding: 0 20px;
}

.content-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.student-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.student-info .student-details {
  margin-left: 20px;
}

.student-details h2 {
  margin: 0 0 10px 0;
}

.study-details {
  margin-bottom: 20px;
}

.chart-section {
  margin-bottom: 20px;
}
</style>
